<template>
    <div class="slider" ref="slider">
        <div class="slider-group" ref="sliderGroup">
            <!--vue 容器-->
            <slot>

            </slot>

        </div>
        <div class="dots">
            <span class="dot" v-for="(item,index) in dots" :class="{active : index==currentPageIndex}">

            </span>
        </div>
    </div>
</template>

<script type="es6">
    import BScroll from 'better-scroll'
    import {addClass} from 'common/js/dom.js'

    export default {
        data(){
            return {
                active: "active",
                dots: [],
                currentPageIndex: 0,
                interva: null
            }
        },
        props: {
            loop: {
                type: Boolean,
                default: true
            },
            autoPlay: {
                type: Boolean,
                default: true
            },
            interval: {
                type: Number,
                default: 4000
            }
        },
        mounted(){// vue 生命周期方法
            //保证在DOM渲染完毕后初始化better-scroll，也就是添加延时执行，
             setTimeout(()=> {
                 //先设置宽度 再初始化
                 this._setSliderWidth();
                 this._initSlider();
                 if (this.autoPlay) {
                     this._play();
                 }
             }, 20)


            //监听窗口改变事件
            window.addEventListener('resize', ()=> {
                if(!this.slider) {
                    return
                }
                this._setSliderWidth(true);
            })
        },
        destroyed(){
            //console.log('destroyed');
            if (this.timer) {
                clearTimeout(this.timer);
            }
        },
        methods: {
            _setSliderWidth(resize){
                if(resize){
                    console.log('screen resize');
                }
                this.children = this.$refs.sliderGroup.children;
                if (this.loop) {
                    this.dots = new Array(this.children.length);
                } else {
                    this.dots = new Array(this.children.length);
                }

                let width = 0;
                let sliderWidth = this.$refs.slider.clientWidth;
                for (let i = 0; i < this.children.length; i++) {
                    let child = this.children[i];
                    addClass(child, 'slider-item');
                    child.style.width = sliderWidth + 'px';
                    width += sliderWidth;
                    // console.log(width);
                }
                //console.log(this.loop);
                if (this.loop && !resize) {
                    width += 2 * sliderWidth;
                }
                //console.log(width);
                this.$refs.sliderGroup.style.width = width + 'px';

            },

            _initSlider(){
                console.log("init slider");
                this.slider = new BScroll(this.$refs.slider, {
                    scrollX: true,
                    scrollY: false,
                    momentum: false,// 当快速滑动时是否开启滑动惯性
                    snap: true,
                    snapLoop: this.loop,
                    snapThreshold: 0.3,
                    snapSpeed: 400
                });

                console.log(this.slider.options.scrollX);

                this.slider.on('scrollEnd', ()=> {
                    this.currentPageIndex = this.slider.getCurrentPage().pageX - 1;
                    //console.log("scrollEnd currentPageIndex===" + this.currentPageIndex);
                    if(this.timer){
                        clearTimeout(this.timer)
                    }
                    this._play()

                });

            },

            _play(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                //console.log("start auto play");
                this.timer = setTimeout(()=> {
                    let pageIndex = this.currentPageIndex + 2;
                    this.slider.goToPage(pageIndex, 0, 400);
                }, this.interval);
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "slider.styl";

</style>
